X-Git-Url: http://git.cyclocoop.org/%22%20urlNoQuery%5B0%5D%20%22?a=blobdiff_plain;f=css%2Fhabillage.scss;h=5ca5f600509f04a8303b050f7f806a5c0e2cb9f9;hb=a2370a3f5cff60b3a9716711ee7fec78f0ffb5f7;hp=a2f6b30905463a0cf869d6a237412c5d5aecef11;hpb=bca2e94d023ec7d0fdf7b1a09266c0b89839dde9;p=lhc%2Fweb%2Fclavettes.git diff --git a/css/habillage.scss b/css/habillage.scss index a2f6b30..5ca5f60 100644 --- a/css/habillage.scss +++ b/css/habillage.scss @@ -39,7 +39,7 @@ menu, nav, output, ruby, summary, mark, audio, video { } html { - line-height: 1; + line-height: 1.1; } ol, ul { @@ -98,7 +98,7 @@ header .spip_logos{ #wrap{ padding-top:130px; - width:1200px; + width:100%; margin:0 auto; } a{ @@ -160,13 +160,11 @@ p{ #ateliers ul li{ margin-bottom:15px; - background-color: #2bc7cd; } #ateliers p{ margin: 15px 15px 0 0; - font-size:1.3em; - font-weight: bold; + font-size:1.0em; text-align: left; } @@ -201,13 +199,16 @@ p{ .map{ background-color:#6059d2; height: 300px; - margin:0 0 15px 10px; + margin:0 10px 15px 10px; +} +.leaflet-control-attribution leaflet-control{ + z-index: 999; } .agenda{ background-color: #3ee88d; height:500px; - margin:0 0 0px 10px; + margin:0 10px 0px 10px; padding-right: 10px; } @@ -225,223 +226,91 @@ p{ .date{ float:left; font-size: 1.7em; - -} - -/*RESPONSIVE*/ - -.col-2, -.col-4, -.col-6, -.col-8, -.col-10, -.col-12{ - float:left; - position:relative; - - -} - -.row:before, .row:after{ - content: ""; - display:table; -} - -.row:after{ - clear:both; -} - - -.row{ - margin: 0 -10px; - zoom: 1; -} - - - -.col-1{ - width:8.33333%; -} - -.col-2{ - width:16.66667%; -} - -.col-3{ - width:25%; -} - - -.col-4{ - width:33.33333%; -} - -.col-5{ - width:41.66667%; -} - -.col-6{ - width:50%; -} - -.col-7{ - width:58.33333%; -} - -.col-8{ - width:66.66666%; -} - -.col-9{ - width:75%; -} - -.col-10{ - width:83.33333%; -} - -.col-11{ - width:91.66667%; -} - -.col-12{ - width:100%; -} - - - - -@media only screen and (min-width:640px) { - -.col-m-1{ - width:8.33333%; -} - -.col-m-2{ - width:16.66667%; + clear: both; } - -.col-m-3{ - width:25%; -} - - -.col-m-4{ - width:33.33333%; -} - -.col-m-5{ - width:41.66667%; -} - -.col-m-6{ - width:50%; +.horaire{ + font-size: 0.8em; } -.col-m-7{ - width:58.33333%; -} - -.col-m-8{ - width:66.66666%; -} - -.col-m-9{ - width:75%; -} +/*RESPONSIVE*/ -.col-m-10{ - width:83.33333%; -} -.col-m-11{ - width:91.66667%; -} +$columns: 12!default; +$medium:650px; +$large:1200px; -.col-m-12{ - width:100%; +%col{ + float:left; + position: relative; } +@for $i from 1 through $columns{ + .col-#{$i}{ + @extend %col; + width:$i / $columns * 100%;} + .col-m-#{$i}, .col-l-#{$i}{@extend %col;} } - - - - - -@media only screen and (min-width:1024px) { - -.col-l-1{ - width:8.33333%; -} - -.col-l-2{ - width:16.66667%; +@media only screen and (min-width: $medium){ + @for $i from 1 through $columns{ + .col-m-#{$i}{ + width:$i / $columns * 100%;} + } + } - -.col-l-3{ - width:25%; +@media only screen and (min-width: $large){ + @for $i from 1 through $columns{ + .col-l-#{$i}{ + width:$i / $columns * 100%;} + } + #wrap{ + width:1200px; } - -.col-l-4{ - width:33.33333%; +.wrap{ + width: auto; } - -.col-l-5{ - width:41.66667%; } -.col-l-6{ - width:50%; -} -.col-l-7{ - width:58.33333%; -} -.col-l-8{ - width:66.66666%; +.row:before, .row:after{ + content: ""; + display:table; } -.col-l-9{ - width:75%; +.row:after{ + clear:both; } -.col-l-10{ - width:83.33333%; -} -.col-l-11{ - width:91.66667%; +.row{ + margin: 0 -10px; + zoom: 1; } -.col-l-12{ - width:100%; -} -} /*FOOTER*/ footer{ clear:both; height:200px; - width:100%; background-color: #ffaa7f; - } footer ul { padding:0; - margin:0; + margin:0 auto; list-style-type:none; padding-top:70px; - margin-left:100px; - +} +.textfooter{ + width:500px; + margin:0 auto; } footer li { - margin-left:2px; float:left; /*pour IE*/ + text-align: center; } footer ul li a { display:block;